<template>
	<view style="background-color: #F5F5F5;">
		<view class="filter-container">
			<view class="item" :class="active === 0 ? 'active' : ''" @click="filterHandle(0)">
				默认
			</view>
			<view class="item" :class="active === 2 ? 'active' : ''" @click="filterHandle(2)">
				价格
				<view class="icons">
                    <image class="icon top" v-show="active !== 2 || active === 2 && !isReverse" src="../../static/langwen/top.png" mode=""></image>
                    <image class="icon top" v-show="active === 2 && isReverse" src="../../static/langwen/top_blue.png" mode=""></image>
					<image class="icon down" v-show="active !== 2 || active === 2 && isReverse" src="../../static/langwen/down.png" mode=""></image>
                    <image class="icon down" v-show="active === 2 && !isReverse" src="../../static/langwen/down_blue.png" mode=""></image>
                </view>
			</view>
			<view class="item" :class="active === 1 ? 'active' : ''" @click="filterHandle(1)">
				销量
				<view class="icons">
					<image class="icon top" v-show="active !== 1 || active === 1 && !isReverse" src="../../static/langwen/top.png" mode=""></image>
                    <image class="icon top" v-show="active === 1 && isReverse" src="../../static/langwen/top_blue.png" mode=""></image>
					<image class="icon down" v-show="active !== 1 || active === 1 && isReverse" src="../../static/langwen/down.png" mode=""></image>
                    <image class="icon down" v-show="active === 1 && !isReverse" src="../../static/langwen/down_blue.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list-container">
			<item :item="item" v-for="(item,index) in listData" :key="index"></item>
			<view :class="categoryId !== '' || recommandStatus == 1 ? 'tips tips-gary' : 'tips'" v-show="tipsShow">没有更多数据了</view>
		</view>
	</view>
</template>

<script>
import item from '@/components/langwen/item.vue';
import Api from '@/common/api'
export default {
	name: 'filters',
    props: ['recommandStatus','floorId', 'activityId', 'activityType'],
	data() {
		return {
			// 是否显示提示
			tipsShow: false,
            // 0 默认 2 价格 1 销量
            active: 0,
            // true 倒序 false 正序
            isReverse: false,
            // 商品列表
            listData: [],
            // 关键字
            keyword: '',
			// 二级分类 id 和 一级分类 id
			categoryId: '',
			// 三级分类 id
			categoryId3: '',
			// 分类级别
			categoryLevel: '',
			pageNum: 1,
			pageSize: 10
		}
    },
    created() {
        this.getListData('headerRefreshing');
    },
    watch: {
        active() {
            this.isReverse = false;
            this.getListData('headerRefreshing');
        },
        isReverse() {
            this.getListData('headerRefreshing');
        }
    },
	methods: {
        // 如果 val 等于 active, 就切换 isReverse, 否则切换 active
		filterHandle(val) {
            if(val !== this.active) {
                this.active = val;
            } else {
                this.isReverse = !this.isReverse;
            };
        },
        // 商品列表
        async getListData(sign) {
			if(!this.keyword && !this.floorId && !this.recommandStatus && !this.categoryId && !this.activityId) {
				return;
			};
			if(sign == 'headerRefreshing') {
				this.pageNum = 1;
			} else {
				this.pageNum ++;
			}
			if(this.floorId) {
				var params;
				var url;
				params = {
					'floorId': this.floorId || '',
				    'sort': this.active === 0 ? '' : this.active,
				    // 如果正倒序显示不对, 就把 1 和 2的位置调换一下
				    'orderBy': this.isReverse ? 1 : 2,
				    'pageSize': this.pageSize,
				    'pageNum': this.pageNum
				};
				url = Api.index.floorGoodsList;
				var data = await Api.apiCall('get', url, params);
				if(this.pageNum == 1) {
					this.listData = [];
				}
				this.listData = this.listData.concat(data.records);
			} else if(this.activityId) {
				var params;
				var url;
				params = {
					'activityId': this.activityId || '',
				    'sort': this.active === 0 ? '' : this.active,
				    // 如果正倒序显示不对, 就把 1 和 2的位置调换一下
				    'orderBy': this.isReverse ? 1 : 2,
				    'pageSize': this.pageSize,
				    'pageNum': this.pageNum,
                    'type': this.activityType == 3 ? '1' : '2'
				};
				url = Api.index.activityDetail;
				var data = await Api.apiCall('get', url, params);
				if(this.pageNum == 1) {
					this.listData = [];
				}
				this.listData = this.listData.concat(data.records);
			} else if(this.categoryId) {
				var params;
				var url;
				params = {
					'categoryId': this.categoryId, // 二级分类
                    'categoryId3': this.categoryId3, // 三级分类
				    'categoryLevel': this.categoryLevel, // 分类级别
				    'sort': this.active === 0 ? '' : this.active,
				    // 如果正倒序显示不对, 就把 1 和 2的位置调换一下
				    'orderBy': this.isReverse ? 1 : 2,
				    'pageSize': this.pageSize,
				    'pageNum': this.pageNum
				};
				url = Api.sort.findLev3Goods;
				var data = await Api.apiPostCall('post', url, params);
				if(this.pageNum == 1) {
					this.listData = [];
				}
				this.listData = this.listData.concat(data.records);
			} else {
				var params;
				var url;
				params = {
					'floorId': this.floorId || '',
				    'keyword': this.keyword || '',
				    'sort': this.active === 0 ? '' : this.active,
				    // 如果正倒序显示不对, 就把 1 和 2的位置调换一下
				    'orderBy': this.isReverse ? 1 : 2,
				    'pageSize': this.pageSize,
				    'pageNum': this.pageNum,
				    // 如果 recommandStatus = 1, 就是精选
				    'recommandStatus': this.recommandStatus || 0
				};
				url = Api.goods.findGoods;
				var data = await Api.apiCall('get', url, params);
				if(this.pageNum == 1) {
					this.listData = [];
				}
				this.listData = this.listData.concat(data.records);
			};
			this.$nextTick(function(){
				if(this.listData.length === 0) {
					this.tipsShow = true;
				} else {
					this.tipsShow = false;
				}
			})
        }
	},
	components: {
		item
    }
}
</script>

<style lang="less">
.filter-container {
	display: flex;
	align-items: center;
	height: 80rpx;
	background:rgba(255,255,255,1);
	border-top: 1rpx solid rgba(212,215,224,1);
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		font-size:28rpx;
		font-weight:400;
		color:rgba(63,64,70,1);
		.icons {
			width: 12px;
			.top {
				margin-bottom: -3px;
			}
			.down {
				margin-top: -3px;
			}
		}
		.icon {
			float: left;
			width: 12px;
			height: 12px;
			margin-left: 6px;
		}
	}
	.active {
		font-size:28rpx;
		font-weight:400;
		color:rgba(90,194,255,1);
	}
}

.list-container {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	background:rgba(255,255,255,1);
	border-radius:20rpx 20rpx 0 0;
}

.tips {
	flex-grow: 1;
	padding-top: 160rpx;
	text-align: center;
	font-size: 28rpx;
}

.tips-gary {
	background-color: #F5F5F5;
}
</style>
